<template>
  <div class="container drag">
    <div class="left-container">
      <ul class="menu-container no-drag" style="margin-top: 50px">
        <li class="menu-item" v-for="(item ,index) in menuList"  @click="handleMenu(item)" :style="{ backgroundColor: item.active ? 'rgb(228, 228, 228)' : 'white'}">
          <span>
            <el-icon v-if="item.value === 1" class="font"><User /></el-icon>
            <el-icon v-if="item.value === 2" class="font"><Setting /></el-icon>
            <el-icon v-if="item.value === 3" class="font"><Lock /></el-icon>
            <el-icon v-if="item.value === 4" class="font"><Bell /></el-icon>
            <el-icon v-if="item.value === 5" class="font"><SwitchFilled /></el-icon>
            <el-icon v-if="item.value === 6" class="font"><Warning /></el-icon>

          </span>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>

    <div class="right-container">

      <template v-if="1 === menuList.filter(item => item.active === true)[0].value">
        <div class="account-container no-drag">
          <div class="account-info">
            <div style="display: flex;">
              <yd-img style="margin-right: 10px"  :src="userStore.avatar" width="35px" height="35px" fit="cover"></yd-img>
              <div style="display: flex;flex-direction: column;">
                <span>{{userStore.nickname}}</span>
                <span style="font-size: 10px;color: grey">{{userStore.email}}</span>
              </div>
            </div>
            <el-button size="small" @click="handleLogout">退出登录</el-button>
          </div>
          <div>

          </div>

        </div>
      </template>

      <template v-else>
        <el-empty></el-empty>
      </template>



    </div>
  </div>
</template>

<script setup>
import ydImg from '@/components/img/index.vue'

import { onMounted, ref } from 'vue'
import { Bell, Lock, Setting, SwitchFilled, User, Warning } from '@element-plus/icons-vue'
import { useUserStore } from '../../stores/user'
import { useSystemStore } from '../../stores/system'

const userStore = useUserStore()
userStore.userInfo()
const systemStore = useSystemStore()
const menuList = ref([
  {name : '账号与存储' , value:1 , active: true},
  {name : '通用' , value:2},
  {name: '快捷键' , value:3},
  {name: '通知' , value:4},
  {name: '插件' , value:5},
  {name: '关于微信' , value:6},
])


// 点击菜单时
const handleMenu = (item) => {
  menuList.value.forEach((item2, index) => {
    item2.active = item.value === item2.value
  })
}

// 点击退出登录时
const handleLogout = () => {
  window.ipcRenderer.send('logout')
}

</script>



<style scoped lang="less">
.container {
  color:black;
  display: flex;


  .left-container {
    width: 159px;
    border-right: 1px solid rgb(207,207,207);

    .menu-container {
      width: 100%;
      padding: 0 8px;
      color: black;

      .menu-item {
        align-items: center;
        height: 40px;
        padding: 5px 15px;
        border-radius: 5px;
        display: flex;
        cursor: pointer;
        font-size: 14px;
      }

      .menu-item:hover {
        background-color: rgb(228, 228, 228) !important;
      }


      .font {
        font-size: 20px;
        margin-right: 10px;
      }
    }

  }

  .right-container {
    flex: 1;
    height: 100%;
    background-color: rgb(237, 237, 237);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding-top: 50px;
    align-items: center;
    box-sizing: border-box;

    .account-container {
      width: 80%;


      .account-info {
        background-color: white;
        padding: 15px 15px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 1px rgb(126,126,126);
      }
    }
  }
}
</style>
